import { jsonToDom } from '@u'
// 图例生成空间
export class LegendControl {
  constructor(legends) {
    this._legends = legends
  }
  onAdd(map) {
    this._map = map
    this._container = document.createElement('div')
    this._container.className = 'legend-control'
    this._container.appendChild(this.getDom())
    return this._container
  }
  onRemove() {
    this._container.parentNode.removeChild(this._container)
    this._map = undefined
  }
  getDom() {
    const dom = {
      tagName: 'div',
      classList: ['legends'],
      children: [
        {
          tagName: 'div',
          classList: ['legend-color-box'],
          style: this._legends.reduce((totol, next, index) => {
            return (
              totol +
              next.color +
              (index === this._legends.length - 1 ? ');' : ',')
            )
          }, 'background-image: linear-gradient('),
          children: this._legends.map(() => {
            return {
              tagName: 'div',
              classList: ['legend'],
              children: [
                {
                  tagName: 'span',
                  // style: `background-color: ${color}`,
                  classList: ['legend-color'],
                },
              ],
            }
          }),
        },
        {
          children: this._legends.map(({ name }) => {
            return {
              tagName: 'div',
              classList: ['legend'],
              children: [
                {
                  title: name,
                  tagName: 'span',
                  text: name,
                  classList: ['legend-name'],
                },
              ],
            }
          }),
        },
      ],
    }
    console.log(dom)

    return jsonToDom(dom)
  }
}
